<script lang="ts" setup>
import { ref } from "vue";
import { Line, Matrix, Polygon, Rectangle } from "../packages/led-screen-canvas/shapes.ts";
import { LedScreenCanvas } from "../packages";

const controllerRef = ref();

const onReady = () => {
  if (true) {
    const [w, h, size] = [15360, 8640, 50];
    const matrix = new Matrix(0, 0, w, h, size, size);
    matrix.canMove = false;
    matrix.canHover = true;
    for (let ofx = 0; ofx < w; ofx += 100) {
      for (let ofy = 0; ofy < h; ofy += 100) {
        for (let x = 0; x < 100; x++) {
          for (let y = 0; y <= x; y++) {
            const [tx, ty] = [ofx + x, ofy + y];
            matrix.setActiveGrid(true, tx, ty);
          }
        }
      }
    }
    controllerRef.value.addShapes([matrix]);
  }

  if (false) {
    const rect = new Rectangle(0, 0, 50, 50);
    rect.zoom = false;
    rect.alignPercent = [-0.5, -0.5];
    controllerRef.value.addShapes([rect]);
  }

  if (false) {
    const shapes = [];
    const size = 50;
    for (let i = 0; i < 500; i++) {
      for (let j = 0; j < 500; j++) {
        const rect = new Rectangle(i * size, j * size, size, size);
        rect.canMove = true;
        if ((i % 2 == 1 && j % 2 == 0) || (i % 2 == 0 && j % 2 == 1)) {
          rect.zoom = false;
          rect.alignPercent = [-0.5, -0.5];
          rect.theme = {
            default: {
              fillColor: "red",
              textColor: "white",
              borderWidth: 1,
              borderColor: "white",
            },
          };
        }
        rect.text = `LED(${j},${i})`;
        shapes.push(rect);
      }
    }
    controllerRef.value.addShapes(shapes);
  }

  if (false) {
    const lines = [
      new Line([20, 20], [100, 100], 20),
      new Line([100, 100], [200, 200], 10),
      new Line([1000, 100], [200, 200], 5),
    ];
    controllerRef.value.addShapes(lines);
  }

  if (false) {
    const polygon = new Polygon(
      [
        [0, 0],
        [120, -20],
        [150, 80],
        [80, 120],
        [20, 140],
        [-30, 100],
        [-20, 40],
        [-10, 10],
      ],
      3,
      10,
    );
    polygon.canMove = true;
    polygon.setTheme({
      default: {
        fillColor: "red",
        textColor: "white",
        borderWidth: 1,
        borderColor: "white",
      },
    });
    controllerRef.value.addShapes([polygon]);
  }
};
</script>

<template>
  <div style="position: relative; width: 100vw; height: 80vh; box-sizing: border-box">
    <led-screen-canvas
      ref="controllerRef"
      @on-ready="onReady"
      @on-click="
        (shape, e) => {
          shape?.setActive(!shape?.isActive(e), e);
        }
      "
      @on-shape-move-start="
        (shape, _e) => {
          shape.setZIndexTop();
        }
      "
    />
    <a-space>
      <a-button @click="() => controllerRef.resetZoom()">重置缩放</a-button>
      <a-input @change="(v) => controllerRef.zoom(v)"></a-input>
      <a-button @click="() => controllerRef.zoom2RealSize()">100%大小</a-button>
      <a-button @click="() => controllerRef.start()">开始</a-button>
      <a-button @click="() => controllerRef.stop()">停止</a-button>
    </a-space>
  </div>
</template>

<style scoped lang="less"></style>
